<template>
  <uv-popup ref="popup" mode='bottom' safeAreaInsetBottom bgColor='#FFF' round='40rpx'>
    <view class="share">
      <view class="share-title">更多</view>
      <view class="list">
        <view class="item" @click="columnOpen" v-if="user.identity == 1 || user.identity == 2">
          <view class="icon">
            <image src="../../static/some1.png" class="img"></image>
          </view>
          <view class="name" v-if="type == 'column'">移出专栏</view>
          <view class="name" v-else>收进专栏</view>
        </view>
        <view class="item" @click="callTop" v-if="user.identity == 1">
          <view class="icon">
            <image src="../../static/some2.png" class="img"></image>
          </view>
          <view class="name" v-if="detail.is_top">取消置顶</view>
          <view class="name" v-else>设为置顶</view>
        </view>
        <view class="item" @click="callBest" v-if="user.identity == 1 || user.identity == 2">
          <view class="icon">
            <image src="../../static/some3.png" class="img"></image>
          </view>
          <view class="name" v-if="detail.is_best">取消精华</view>
          <view class="name" v-else>设为精华</view>
        </view>
        <view class="item" @click="deleteOpen" v-if="user.identity == 1 || detail.is_my">
          <view class="icon">
            <image src="../../static/some4.png" class="img"></image>
          </view>
          <view class="name">删除{{ themeType == 'answer' ? '问题' : '主题' }}</view>
        </view>
      </view>
      <uv-line hairline></uv-line>
      <view class="foot" @click="close">取消</view>
    </view>
  </uv-popup>
  
  <uv-modal ref="modal" title="提示" showCancelButton confirmColor='#E43222' confirmText='确认' @confirm="deleteTheme">
    <view>
      是否确认删除{{ themeType == 'answer' ? '问题' : '主题' }}？
    </view>
  </uv-modal>
  
  <column ref="columns" :themeType='themeType' @click="emit('click')"></column>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useOrder } from '@/store';
import { toast } from '@/common';
import { post } from '@/api';
import column from './column.vue';

const props = defineProps(['type', 'column_id', 'themeType']);

const emit = defineEmits(['click'])
const popup = ref(null);
const modal = ref(null);
const columns = ref(null);

let detail = ref({});
let user = ref({});
let body = computed(() => {
  const store = useOrder();
  let group = store.group;
  return group.member_info;
});

// 删除主题/问题
function deleteTheme(){
  const url = props.themeType == 'answer' ? 'api/association_question/delAssociationQuestion' : 'api/association_theme/delTheme';
  const obj = props.themeType == 'answer' ? { question_id: detail.value.id } : { theme_id: detail.value.id };
  post(url, obj).then(res => {
    if(res.code == 1){
      toast('操作成功');
      emit('click');
    }
  })
}
// 置顶
function callTop(){
  const params = {
    way: detail.value.is_top == 1 ? 2 : 1
  }
  let url = '';
  if(props.themeType == 'answer'){
    params.question_id = detail.value.id;
    url = 'api/association_question/setQuestionTop';
  }else{
    params.theme_id = detail.value.id;
    url = 'api/association_theme/setThemeTop';
  }
  post(url, params).then(res => {
    if(res.code == 1){
      toast('操作成功');
      emit('click');
      popup.value.close();
    }
  })
}
// 精华
function callBest(){
  const params = {
    way: detail.value.is_best == 1 ? 2 : 1
  }
  let url = '';
  if(props.themeType == 'answer'){
    params.question_id = detail.value.id;
    url = 'api/association_question/setQuestionBest';
  }else{
    params.theme_id = detail.value.id;
    url = 'api/association_theme/setThemeBest';
  }
  post(url, params).then(res => {
    if(res.code == 1){
      toast('操作成功');
      emit('click');
      popup.value.close();
    }
  })
}
// 移出专栏
function deleteColumn(){
  const params = {
    column_id: props.column_id
  }
  let url = '';
  if(props.themeType == 'answer'){
    params.question_id = detail.value.id;
    url = 'api/association_question/delQuestionColumn';
  }else{
    params.theme_id = detail.value.id;
    url = 'api/association_theme/delThemeColumn';
  }
  post(url, params).then(res => {
    if(res.code == 1){
      toast('操作成功');
      emit('click');
      popup.value.close();
    }
  })
}
function columnOpen(){
  if(props.type == 'column'){
    deleteColumn();
  }else{
    popup.value.close();
    console.log(detail.value);
    columns.value.select = detail.value.column_ids.split(',').map(e => Number(e));
    columns.value.detail = detail.value;
    columns.value.open();
  }
}
function deleteOpen(){
  modal.value.open();
  popup.value.close();
}
function open(){
  popup.value.open();
}
function close(){
  popup.value.close();
}

defineExpose({
  open,
  close,
  detail,
  user
})
</script>

<style lang="scss" scoped>
  .share{
    &-title{
      font-weight: 500;
      font-size: 36rpx;
      color: #2B2B2B;
      padding: 40rpx 0;
      text-align: center;
    }
    .foot{
      height: 90rpx;
      width: 100%;
      line-height: 90rpx;
      font-weight: 400;
      font-size: 32rpx;
      color: #2B2B2B;
      text-align: center;
    }
    .list{
      padding: 0 30rpx;
      padding-bottom: 50rpx;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .item{
        flex: 1;
        .icon{
          width: 90rpx;
          height: 90rpx;
          font-size: 0;
          margin: 0 auto;
        }
        .name{
          font-weight: 400;
          font-size: 24rpx;
          color: #737373;
          padding-top: 16rpx;
          text-align: center;
        }
      }
    }
  }
</style>